<template>
	<view class="map-wrap">
		<view id="control-legend">
			<view class="control-legend-content">
				<view class="reportHead">
					<view class="title">告警管理</view>
				</view>
				<view class="timeRange">

					<view class="example-body">
						<uni-datetime-picker v-model="range" type="daterange" @change="maskClick" />
					</view>
				</view>
				<view class="table-header">
					<text>监测点</text>
					<text>类型</text>
					<text>标题</text>
					<text>状态</text>
					<text>时间</text>
					<text>操作</text>
				</view>
				<view class="table-body">
					<view class="table-row" v-for="alert in operationReport" :key="alert.id">
						<text>{{ alert.monitoringPoint}}</text>
						<text>{{ alert.equipment}}</text>
						<text>{{ alert.title}}</text>
						<text
							:style="getAlertStyle(alert.handleState)">{{ alert.handleState === 0 ? '已处理' : '未处理' }}</text>
						<text>{{ alert.createdTime}}</text>
						<text class="button"
							@click="handleButtonClick(alert)">{{ alert.handleState === 0 ? '详情' : '确认' }}</text>
					</view>
					<u-modal :show="show" :showConfirmButton="false" :closeOnClickOverlay="true" title="" content=''>
						<view class="slot-content">
							<text class="alert-title">告警处理</text>
							<view class="modal-row">
								<text>监测点：</text>
								<u--input v-model="point" disabled />
							</view>
							<view class="modal-row">
								<text>类型：</text>
								<u--input v-model="type" disabled />
							</view>
							<view class="modal-row">
								<text>标题：</text>
								<u--input v-model="title" disabled />
							</view>
							<view class="modal-row">
								<text>处理时间：</text>
								<u--input v-model="time" disabled />
							</view>
							<view class="modal-row">
								<text>描述：</text>
								<u--input v-model="describe" placeholder="请输入" />
							</view>
							<view class="modal-row">
								<button @click="cancelSave">取消</button>
								<button @click="saveData">保存</button>
							</view>
						</view>
					</u-modal>
					<u-modal :show="showSure" :showConfirmButton="false" :closeOnClickOverlay="true" title=""
						content=''>
						<view class="slot-content">
							<text class="alert-title">告警详情</text>
							<view class="modal-row">
								<text>监测点：</text>
								<u--input v-model="point" disabled></u--input>
							</view>
							<view class="modal-row">
								<text>类型：</text>
								<u--input v-model="type" disabled />
							</view>
							<view class="modal-row">
								<text>标题：</text>
								<u--input v-model="title" disabled />
							</view>
							<view class="modal-row">
								<text>处理时间：</text>
								<u--input v-model="time" disabled />
							</view>
							<view class="modal-row">
								<text>描述：</text>
								<u--input v-model="descMessage" disabled />
							</view>
							<view class="modal-row">
								<button @click="cancelSave">关闭</button>
							</view>
						</view>
					</u-modal>
				</view>
			</view>
		</view>
		<view class="input-box" :operation="operationSearch" :change:operation="mapboxModule.loadOperationLocation">
			<u-search class="search" placeholder="请输入电缆井名称" v-model="searchQuery" @input="onSearchInput"
				:show-action="false">
			</u-search>
			<scroll-view class="searchWellName" v-if="searchQuery && operation.length > 0" scroll-y="false">
				<view v-for="well in operation" :key="well.id" class="list-item"
					@click="reportOneWell(well.lon,well.lat)">
					{{ well.cableWellName }}
				</view>
			</scroll-view>
		</view>
		<!-- 在线监测 -->
		<view class="tab-pane" v-if="showHeadAndLine">
			<view class="lineBox">
				<text class="lineTitle">在线监测</text>
			</view>
			<view class="select-style">
				<text class="headName">接头名称：</text>
				<picker :value="index" :range="headAndeLineData" range-key="name" class="project-picker"
					@change="tashHeadChange">
					<view class="picker-content">
						{{ headAndeLineData[index] ? headAndeLineData[index].name : '请选择接头' }}
					</view>
				</picker>
			</view>
			<view class="temperature-item-one">
				<view class="row">
					<text class="label">主机状态：</text>
					<text class="value">{{selectedHead.data.hostStatus }}</text>
				</view>
				<view class="row">
					<text class="label">水浸状态：</text>
					<text class="value">{{selectedHead.data.waterStatus }}</text>
				</view>
			</view>
			<view class="temperature-item">
				<view class="row">
					<text class="label">环境温度：</text>
					<text class="value">{{selectedHead.data.environmentTemperature}}</text>
				</view>
				<view class="row">
					<text class="label">接头温度：</text>
					<text class="value">{{selectedHead.data.cableTemperature}}</text>
				</view>
			</view>
			<view class="temperature-item">
				<view class="row">
					<text class="label">局放峰值：</text>
					<text class="value">{{selectedHead.data.peakValue }}</text>
				</view>
				<view class="row">
					<text class="label">局放均值：</text>
					<text class="value">{{selectedHead.data.averageValue}}</text>
				</view>
			</view>
		</view>
		<view :operation="operationWell" :change:operation="mapboxModule.loadOperation"></view>
		<!-- <view :operation="operationReport" :change:operation="mapboxModule.loadOperationReport"></view> -->
		<!-- <view :operation="operationLineHead" :change:operation="mapboxModule.renderPopup"></view> -->
		<view :operation="operationLineData" :change:operation="mapboxModule.renderLineData"></view>
		//渲染的井
		<view :operation="disposeReportWell" :change:operation="mapboxModule.loadOperationReport"></view>
		<!-- #ifdef APP-PLUS || H5 -->
		<view id="map-box" @click="handleOutsideClick">
			<!-- 这里是mapbox的地图容器 -->
			<view id="basemap-switch-panel">
				<view class="title">选择底图</view>
				<view class="basemap-container">
					<view class="basemap-item active" id="vec-basemap-button" name="vec">
						<image class="thumbnail" src="/static/tuli/vec.jpg"></image>
						<view>矢量底图</view>
					</view>
					<view class="basemap-item" id="img-basemap-button" name="img">
						<image class="thumbnail" src="/static/tuli/raster.jpg"></image>
						<view>影像底图</view>
					</view>
				</view>
			</view>
		</view>
		<nav-bar :value="2"></nav-bar>
		<!-- #endif -->
	</view>
</template>
<script>
	import request from '@/util/request/request.js'
	import navBar from '@/components/common/nav';
	import {
		result
	} from 'lodash';
	let map = null

	export default {
		components: {
			navBar,
		},
		data() {
			return {
				options: [],
				operationWell: true,
				operationSearch: true,
				operationReport: true,
				operationLine: true, //监测数据
				// operationLineHead: true, //接头
				headAndeLineData: [],
				selectedHead: null,
				operationLineData: true, //接头对应的监测数据
				startTime: '', //告警点位的开始时间
				endTime: '', //告警点位的结束时间
				repotrWell: [], //存储告警点位
				searchQuery: '', //搜索框的值
				allWells: [], //所有电缆井数据
				show: false,
				showSure: false,
				showHeadAndLine: false,
				point: '',
				type: '',
				title: '',
				time: '',
				describe: '',
				reportId: '',
				descMessage: '',
				range: [],
				onLineData: [],
				descData: [],
				index: null,
				disposeReportWell: []

			};
		},
		mounted() {
			this.wellData(),
				this.setDefaultDateRange(), // 设置默认日期范围
				this.reportWellData(this.startTime, this.endTime)
		},
		methods: {
			getAlertStyle(handleState) {
				if (handleState === 0) {
					return {
						color: 'green'
					};
				} else {
					return {
						color: 'red'
					};
				}
			},

			handleOutsideClick() {
				this.showHeadAndLine = false;
				this.reportWellData(this.startTime, this.endTime);
			},

			//时间选择器
			maskClick(e) {
				this.startTime = e[0];
				this.endTime = e[1];
				// 调用方法来获取新的告警数据
				this.reportWellData(this.startTime, this.endTime);

			},

			//取消保存
			cancelSave() {
				this.show = false
				this.showSure = false
			},
			//保存处理的告警信息
			async saveData() {
				try {
					// 校验处理描述是否为空
					if (!this.describe || this.describe.trim() === '') {
						// 如果是空的，不执行
						console.warn('处理描述不能为空');
						return;
					}
					const res = await request({
						url: 'http://192.168.2.187:8080/mAlarmHandling/insert',
						method: "POST",
						data: {
							msensorHistoryId: this.reportId,
							equipmentName: this.type,
							handleState: 0, //0已处理 1未处理
							monitoringPoint: this.point,
							processingTime: this.time,
							processingDescription: this.describe,
						}
					});
					this.reportWellData(this.startTime, this.endTime);
					this.show = false;
					this.describe = ''
				} catch (error) {
					// 处理请求错误
					console.error('请求失败', error);
				}
			},

			//详情和确认按钮
			handleButtonClick(alert) {
				//已处理详情
				if (alert.handleState === 0) {
					this.desc(alert)
					this.fetchDescData(alert.id)
				} else {
					this.dispose(alert);
				}
			},
			//详情按钮
			desc(alert) {
				this.reportId = alert.id;
				this.point = alert.monitoringPoint;
				this.type = alert.equipment;
				this.title = alert.title;
				this.time = alert.createdTime;
				this.descMessage = this.descData.processingDescription
				this.showSure = true;
			},

			//描述接口
			async fetchDescData(id) {
				const res = await request({
					url: `http://192.168.2.187:8080/mAlarmHandling/selectAlarm?mSensorHistoryId=${id}`,
					method: "get",
				});
				if (res.status === 'SUCCESS') {
					this.descData = res.result; // 存储描述信息
				}
			},

			//确认按钮
			dispose(alert) {
				this.reportId = alert.id;
				this.point = alert.monitoringPoint;
				this.type = alert.equipment;
				this.title = alert.title;
				this.time = alert.createdTime;
				this.show = true;
			},

			//接入在线监测的电缆井
			async wellData() {
				const res = await request({
					url: 'http://192.168.2.187:8080/mConnectHost/selectAll',
					method: "get",
				});
				if (res.status === 'SUCCESS') {
					this.allWells = [...res.result.records]; // 存储所有电缆井信息
					this.operationWell = this.allWells; // 初始化显示所有电缆井信息
					console.log('加载成功')
				}
			},
			//根据井的id获取接头
			async fetchHeadName(selectedStateId) {
				//id指的是电缆井id
				const apiUrl =
					// `http://192.168.2.187:8080/mConnectHost/selectConnectorByHostIds?wellId=${selectedStateId}`;
					`http://192.168.2.187:8080/mConnectHost/selectMonitorByWellId?wellId=${selectedStateId}`;
				try {
					const res = await request({
						url: apiUrl,
					});
					if (res.status === 'SUCCESS') {
						this.headAndeLineData = res.result; //获取的接头在result中
						this.tashHeadChange({
							detail: {
								value: 0
							}
						}); // 初始选择第一个接头
						this.showHeadAndLine = true
					} else {
						console.error('根据井Id获取接头失败', res);
					}
				} catch (error) {
					console.error('根据井Id获取接头失败:', error);
				}

			},

			tashHeadChange(e) {
				this.index = e.detail.value;
				this.selectedHead = this.headAndeLineData[this.index];
			},
			//根据接头的id获取在线监测数据
			async fetchLineData(headId) {
				//id指的是电缆井id
				const apiUrl =
					`http://192.168.2.187:8080/mConnectHost/selectHostByHostNumber?connectId=${headId}`
				try {
					const res = await request({
						url: apiUrl,
					});
					if (res.status === 'SUCCESS') {
						this.operationLineData = res.result; //获取的接头在result中
					} else {
						console.error('根据接头Id获取在线监测失败', res);
					}
				} catch (error) {
					console.error('根据接头Id获取在线监测失败:', error);
				}
			},
			// 设置默认日期范围为一周
			setDefaultDateRange() {
				const now = new Date();
				const startOfWeek = new Date(now);
				startOfWeek.setDate(now.getDate() - 7); // 设置7天前的日期
				const endOfWeek = new Date(now);
				endOfWeek.setDate(now.getDate()); // 设置今天往后推一天
				this.startTime = startOfWeek.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
				this.endTime = endOfWeek.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
			},
			//告警的电缆井
			async reportWellData(startTime, endTime) {
				try {
					const res = await request({
						url: `http://192.168.2.187:8080/mSensorHistory/selectAlarm?startTime=${startTime}&endTime=${endTime}&pageNum=1&pageSize=999`,
						method: "get",
					});
					if (res.status === 'SUCCESS') {
						//告警列表显示所有的
						this.operationReport = [...res.result.records];

						//渲染的点位只显示已处理的。
						const filteredRecords = res.result.records.filter(record => record.handleState === 1);
						this.disposeReportWell = [...filteredRecords];
					}
				} catch (error) {
					console.error('告警点位加载失败:', error);
				}
			},
			// 模糊查询电缆井
			onSearchInput() {
				const queryString = this.searchQuery.trim();
				if (!queryString) {
					this.operation = []; // 如果没有输入，清空显示列表
				}

				// 使用 filter 方法进行模糊查询
				this.operation = this.allWells.filter(well =>
					well.cableWellName.toLowerCase().includes(queryString.toLowerCase())
				);
			},
			// 处理点击列表项事件
			reportOneWell(lat, lon) {
				this.operationSearch = {
					lat,
					lon
				}
				this.searchQuery = '';
			},
		}
	}
</script>

<script module="mapboxModule" lang="renderjs">
	import basemapSwitchControl, {
		vecBaseMapStyle
	} from "./control-basemap-switcher";
	import legendControl from "./control-legend";
	import mainStore from "../../store/index"
	import cableWellImage from "../../static/images/well/cableWell_voltage_medium.png"
	import cableWellReportImage from "../../static/images/well/reportWell.png"
	const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
	let map = null //地图实例  
	let propertiesPanel = null
	let currentBaseMap = 'vec'
	let navigationData = {}
	var link = document.createElement("link");
	link.rel = "stylesheet";
	link.type = "text/css";
	link.href = "https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css";
	document.getElementsByTagName("head")[0].appendChild(link)

	let coordinates_pop = null
	let id_pop = null

	let receiveLineData = null

	export default {
		data: {
			return () {
				map: null
			}
		},
		mounted() {
			this.createdMap()
		},
		methods: {
			async createdMap() { //创建地图   
				mapboxgl.accessToken =
					'pk.eyJ1IjoiZm91cmtpbG9taXRlcnMiLCJhIjoiY2lxZzBzcWJnMDN1ZGZ3bTFzMmdta3l4ZSJ9.AXqPxz4eauI7eOYfaL4eyA';
				var tileset = "mapbox.fourkilomiters.90yq9gbt";
				map = new mapboxgl.Map({
					container: 'map-box', // 地图容器的 id 
					style: vecBaseMapStyle, // 地图样式
					// center: [118.810251, 32.062151], // 地图中心坐标点  
					zoom: 11, // 地图缩放等级
					projection: "globe", // 显示地图为3D球体
					localIdeographFontFamily: null //本地字体族，用于显示东亚语言字符
				});
				this.map = map
				// 实现实时定位
				var geolocate = new mapboxgl.GeolocateControl({
				  positionOptions: {
				    enableHighAccuracy: true ,// 是否启用高精度模式
				  },
				  trackUserLocation: true ,// 是否跟踪用户位置
				  
				});
				 
				// 添加GeolocateControl到地图
				map.addControl(geolocate);
				map.addControl(new mapboxgl.NavigationControl({}));
				map.addControl(legendControl);
				map.addControl(basemapSwitchControl);
				
				},
								
				loadOperation(newValue, oldValue, ownerInstance, instance) {
						this.rendersPT(newValue)
					},
					//点击搜索列表定位到井
					loadOperationLocation(newValue, oldValue, ownerInstance, instance) {
						// 定位到指定的经纬度
						map.flyTo({
							center: [newValue.lat, newValue.lon], // 想要定位的经纬度
							zoom: 11 // 适当的缩放级别
						});
					},

					//加载告警点位
					loadOperationReport(newValue, oldValue, ownerInstance, instance){
						this.rendersReportPT(newValue)
					},
					//加载所有井的点位
					rendersPT(wellList) {
						const _this = this
						// 解析数据并构建 GeoJSON 数据源
						const geojsonData = {
							type: 'FeatureCollection',
							features: wellList.map(point => {
								return {
									type: 'Feature',
									geometry: {
										type: 'Point',
										coordinates: [parseFloat(point.lon), parseFloat(point
											.lat)] // 将经纬度转换为浮点数
									},
									properties: {
										title: point.cableWellName || '未知', // 井的名字，如果没有则显示“未知”
										id: point.cableWellNumber // 井的唯一标识符
									}
								}
							})
						};
						if (this.map) {
							// 地图已经初始化，可以安全地调用方法
							this.map.addSource('well-points', {
								type: 'geojson',
								data: geojsonData,
							});

							// 计算中心点
							function calculateCentroid(geojson) {
								let totalLon = 0;
								let totalLat = 0;
								const count = geojson.features.length;

								if (count === 0) return null;

								geojson.features.forEach(feature => {
									const coordinates = feature.geometry.coordinates;
									totalLon += coordinates[0];
									totalLat += coordinates[1];
								});

								const centroidLon = totalLon / count;
								const centroidLat = totalLat / count;

								return {
									lon: centroidLon,
									lat: centroidLat
								};
							}
							const center = calculateCentroid(geojsonData);

							if (center) {
								// 设置地图视图到中心点
								this.map.flyTo({
									center: [center.lon, center.lat],
									zoom: 11 // 根据需要调整缩放级别
								});
								// 调整地图视图以适应所有标记
								const bounds = new mapboxgl.LngLatBounds();
								geojsonData.features.forEach(feature => {
									bounds.extend(feature.geometry.coordinates);
								});
								this.map.fitBounds(bounds, {
									padding: 50 // 可选，设置边缘留白
								});
							} else {
								console.error('无法计算中心点');
							}
						}
						// 添加图片到地图
						this.map.loadImage(cableWellImage, (error, image) => {
							if (error) throw error;
							if (!this.map.hasImage('well-icon')) {
								this.map.addImage('well-icon', image);
							}
							// 添加符号图层
							this.map.addLayer({
								id: 'well-points-layer',
								type: 'symbol',
								source: 'well-points', // 引用之前添加的数据源
								layout: {
									'icon-image': 'well-icon', // 使用添加的图片
									'icon-size': 0.5, // 图标的大小
									'text-field': ['get', 'title'], // 显示点位的标题
									'text-offset': [0, 0.6], // 文本相对于图标的位置偏移
									// 'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],//设置文本字体
									'text-size': 12, //设置字体大小
									'text-anchor': 'top', // 文本锚点位置
								}
							}, 'report-points-layer'); //新图层覆盖老图层
						});
						this.map.on('click', 'well-points-layer', function(e) {
							// 获取点击位置的特征数据
							const features = map.queryRenderedFeatures(e.point, {
								layers: ['well-points-layer']
							});
							if (features.length > 0) {
								const feature = features[0];
								const coordinates = feature.geometry.coordinates.slice();
								const title = feature.properties.title;
								const id = feature.properties.id;

								coordinates_pop = coordinates
								id_pop = id
								_this.$ownerInstance.callMethod('fetchHeadName', id)
							}
						});
					},
					// //井对应的接头
					// renderPopup(newValue, oldValue, ownerInstance, instance) {
					// 	// 确保 newValue 是一个数组，每个元素都有一个 name 和 id 字段
					// 	const optionsHtml = newValue.map(item => `
					// 	            <option value="${item.id}">${item.name}</option>
					// 	        `).join('');
					// },
					// //对应接头的在线监测数据
					// renderLineData(newValue, oldValue, ownerInstance, instance) {
					// 	receiveLineData = newValue
					// 	new mapboxgl.Popup()
					// 		.setLngLat(coordinates_pop)
					// 		.setHTML(`
					// 	                <h3>在线监测</h3>
					// 					<p>主机状态:${newValue.hostStatus}</p>
					// 					<p>水浸状态:${newValue.waterStatus}</p>
					// 					<p>环境温度:${newValue.environmentTemperature}</p>
					// 					<p>接头温度:${newValue.cableTemperature}</p>
					// 					<p>局放峰值:${newValue.peakValue}</p>
					// 					<p>局放均值:${newValue.averageValue}</p>
					// 	            `)
					// 		.addTo(this.map);
					// 		// // 创建一个div元素作为弹出布局
					// 		// var popup = document.createElement('div');
					// 		// popup.className = 'mapboxgl-popup';
					// 		// popup.innerHTML = '<h1>Hello Wo卢卡斯扣篮大赛考虑考虑rld</h1><p>This is a popup!</p>';

					// 		// 将弹出布局添加到body中
					// 		document.body.appendChild(popup);
					// },
					//加载告警点位
					rendersReportPT(reportList) {
						//重新刷新地图
						// 清除现有的图层和数据源
						if (this.map) {
							if (this.map.getLayer('report-points-layer')) {
								this.map.removeLayer('report-points-layer');
							}
							if (this.map.getSource('report-points')) {
								this.map.removeSource('report-points');
							}
						}


						// 解析数据并构建 GeoJSON 数据源
						const geojsonData = {
							type: 'FeatureCollection',
							features: reportList.map(point => {
								return {
									type: 'Feature',
									geometry: {
										type: 'Point',
										coordinates: [parseFloat(point.longitude), parseFloat(point
											.latitude)] // 将经纬度转换为浮点数
									},
									properties: {
										// title: point.cableWellName || '未知', // 井的名字，如果没有则显示“未知”
										id: point.id // 井的唯一标识符
									}
								}
							})
						};
						if (this.map) {
							// 地图已经初始化，可以安全地调用方法
							this.map.addSource('report-points', {
								type: 'geojson',
								data: geojsonData
							});
						}
						// 添加图片到地图
						this.map.loadImage(cableWellReportImage, (error, image) => {
							if (error) throw error;
							if (!this.map.hasImage('report-icon')) {
								this.map.addImage('report-icon', image);
							}
							// 添加符号图层
							this.map.addLayer({
								id: 'report-points-layer',
								type: 'symbol',
								source: 'report-points', // 引用之前添加的数据源
								layout: {
									'icon-image': 'report-icon', // 使用添加的图片
									'icon-size': 0.5, // 图标的大小
									'text-field': ['get', 'title'], // 显示点位的标题
									'text-offset': [0, 0.6], // 文本相对于图标的位置偏移
									// 'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],//设置文本字体
									'text-size': 12, //设置字体大小
									'text-anchor': 'top', // 文本锚点位置
									"icon-allow-overlap": true,
									"icon-ignore-placement": true,
								},
							});
						});
					}

			}
		}
</script>

<style lang="scss">
	@import '@/style/config.scss';


	// .mapboxgl-ctrl {
	//     display: none !important;
	// }
	// //或隐藏不了
	// //加入/deep/
	// /deep/.mapboxgl-ctrl {
	//     display: none !important;
	// }


	.map-wrap {
		position: relative;
		min-width: 100vw;
		min-height: 100vh;

		.btn-wrap {
			position: absolute;
			top: 100px;
			left: 24px;
		}

		.tab-pane {
			position: absolute;
			bottom: 3rem;
			width: 100%;
			height: auto;
			z-index: 10;
			background: #fff;

			.lineBox {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				background: #00bfbf;

				text {
					padding: 10rpx 10rpx;
				}
			}

			.select-style {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 0 20rpx 0;

				.picker-content {
					padding: 5rpx;
					width: 500rpx;
					font-size: 30rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					border: 2rpx solid #ccc;
					/* 外边框样式 */
					border-radius: 5rpx;
					/* 圆角边框（可选） */
				}

				.headName {
					padding-left: 20rpx;
					margin: 10rpx 0 10rpx 0;
				}
			}

			.temperature-item {
				width: 100%;
				flex: 1;
				/* 每个项占一半 */
				display: flex;
				flex-direction: row;
				justify-content: center;
				padding: 30rpx 0 30rpx 0;
				border-left: 1px solid #ccc;
				/* 左边框 */
				border-right: 1px solid #ccc;
				/* 右边框 */
				border-bottom: 1px solid #ccc;
				/* 底部边框 */
				/* 灰色边框 */
				position: relative;

				/* 相对定位以支持伪元素 */
				.row {
					display: flex;
					align-items: center;
					width: 50%;
					height: 30rpx;
					padding-left: 20rpx;

					.lable {
						text-align: left;
					}
				}
			}

			.temperature-item-one {
				width: 100%;
				flex: 1;
				/* 每个项占一半 */
				display: flex;
				flex-direction: row;
				justify-content: center;
				padding: 30rpx 0 30rpx 0;
				border: 1px solid #ccc;
				position: relative;

				/* 相对定位以支持伪元素 */
				.row {
					display: flex;
					align-items: center;
					width: 50%;
					height: 30rpx;
					padding-left: 20rpx;

					.lable {
						text-align: left;
					}
				}
			}

			.temperature-item-one::after {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				/* 中间位置 */
				width: 1px;
				/* 边框宽度 */
				height: 100%;
				/* 边框高度 */
				background-color: #ccc;
				/* 边框颜色 */
				transform: translateX(-50%);
				/* 中心对齐 */
			}

			.temperature-item::after {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				/* 中间位置 */
				width: 1px;
				/* 边框宽度 */
				height: 100%;
				/* 边框高度 */
				background-color: #ccc;
				/* 边框颜色 */
				transform: translateX(-50%);
				/* 中心对齐 */
			}

			.temperature-item:last-child {
				margin-right: 0;
				/* 最后一个项无右间距 */
			}


			&.active {
				z-index: 1;
			}

			.cable-list-item {
				padding: 0.5rem 0.2rem;
				line-height: 1.5rem;
				border-bottom: #d7d7d7;
			}

			.cable-list-item:nth-child(2n) {
				background-color: #f7f7f7;
			}
		}

		.input-box {
			position: absolute;
			top: 3rem;
			left: 15%;
			width: 70%;
			height: 40px;
			padding: 0.2rem;
			z-index: 10;

			.searchWellName {
				background: #fff;
				width: auto;
				height: auto;
				border-radius: 10rpx;
				padding: 15rpx 15rpx 15rpx 15rpx;
			}

		}
	}

	.loading-more {
		text-align: center;
		padding: 10px;
		color: #999;
	}

	body {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	::v-deep .u-slide-left-enter-to {
		right: 20%;
		overflow: auto;
	}

	::v-deep .ly-tree {
		padding: 0;

		.ly-tree-node__icon {
			background-size: 100%;
		}
	}


	#map-box {
		top: 0;
		left: 0;
		bottom: 50px;
		right: 0;
		position: absolute;
		background-color: #ffffff;
	}

	#map-box /deep/ .mapboxgl-ctrl-geocoder {
		min-width: 140px;
	}

	#map-box /deep/ .mapboxgl-ctrl-geocoder input[type='text'] {
		height: 30px;
	}

	#map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-icon-search {
		top: 5px;
	}

	#map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-pin-right * {
		top: 5px;
	}

	#control-legend {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 100%;
		height: 100%;
		text-align: center;
		z-index: -1;
		display: flex;
		align-items: center;
		justify-content: center;
		;

		.control-legend-content {
			background-color: #ffffff;
			height: 60%;
			width: 100%;
			margin-top: 50%;

			.reportHead {
				background: #00bfbf;
				padding: 20rpx;
			}

			.slot-content {
				display: flex;
				flex-direction: column;

				/* 使子元素垂直排列 */
				text {
					padding: 30rpx 0 30rpx 0;
				}

				button {
					background: #00bfbf;
				}
			}

			.alert-title {
				background: #00bfbf;
			}

			.modal-row {
				display: flex;
				/* 创建一个 Flex 容器 */
				align-items: center;
				/* 垂直居中对齐 */
			}

			.input {
				flex: 1;
				/* 输入框占据剩余的空间 */
			}

			.table-body {
				height: calc(100% - 100px);
				overflow-y: auto;

				.button {
					align-items: center;
					background: #00bfbf;
					border-radius: 5rpx;
				}
			}

		}

		.table-header,
		.table-row {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding: 0 30rpx 0 30rpx;

			text {
				font-size: 25rpx;
				overflow: hidden; //隐藏
				text-overflow: ellipsis;
				/* 设置文本溢出时显示省略号 */
				white-space: nowrap;
				/* 设置不换行 */
				margin: 20rpx 0 20rpx 0;
			}
		}

		.table-row {
			cursor: pointer;
		}

		.table-row .value.active {
			color: green;
		}

		.table-row .value.inactive {
			color: red;
		}

		.table-header>text,
		.table-row>text {
			flex: 1;
			text-align: center;
		}

		.table-header>text:first-child,
		.table-row>text:first-child {
			text-align: left;
		}

		.table-header>text:last-child,
		.table-row>text:last-child {
			text-align: center;
		}

		.row {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}

		.label {
			font-weight: bold;
			width: 100px;
		}

		.value {
			flex-grow: 1;
		}
	}


	.mapboxgl-control-container {
		z-index: 102; // 让控件处于最上层
	}

	.mapboxgl-ctrl-top-right {
		margin-top: 6rem;
	}

	.mapbox-gl-control-basemap {
		background: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.447 4.106a1 1 0 0 0-.894 0l-9 4.5a1 1 0 0 0 0 1.788l9 4.5a1 1 0 0 0 .894 0l9-4.5a1 1 0 0 0 0-1.788l-9-4.5zM12 12.882L5.236 9.5 12 6.118 18.764 9.5 12 12.882z'/%3E%3Cpath d='M3.447 13.606a1 1 0 1 0-.894 1.788l9 4.5a1 1 0 0 0 .894 0l9-4.5a1 1 0 1 0-.894-1.788L12 17.882l-8.553-4.276z'/%3E%3C/svg%3E") no-repeat center;
		background-repeat: no-repeat;
		background-position: 50%;
		background-size: 80%;
	}

	.mapbox-gl-control-legend {
		// background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M334.016 727.04a32 32 0 1 0 0-64 32 32 0 0 0 0 64zm0-183.04a32 32 0 1 0 0-64 32 32 0 0 0 0 64zm0-182.016a32 32 0 1 0 0-64 32 32 0 0 0 0 64zm478.976-279.04H211.008c-37.568.064-67.968 30.528-68.032 68.032v722.048c.064 37.504 30.464 67.968 68.032 67.968h601.984c37.568 0 67.968-30.464 68.032-67.968V150.976c-.064-37.504-30.464-67.968-68.032-67.968zm-3.968 786.048H214.976V155.008h594.048v713.984zM414.016 296h307.968c5.376 0 8 2.688 8 8v48c0 5.312-2.624 8-8 8H414.08c-5.376 0-8-2.688-8-8v-48c0-5.312 2.624-8 8-8zm0 184h307.968c5.376 0 8 2.688 8 8v48c0 5.312-2.624 8-8 8H414.08c-5.376 0-8-2.688-8-8v-48c0-5.312 2.624-8 8-8zm0 184h307.968c5.376 0 8 2.688 8 8v48c0 5.312-2.624 8-8 8H414.08c-5.376 0-8-2.688-8-8v-48c0-5.312 2.624-8 8-8z'/%3E%3C/svg%3E") no-repeat center;
		background: url(/static/images/well/gaojingguanli.png);
		background-position: 50%;
		background-size: 85%;
	}
	
	
	#basemap-switch-panel {
		position: absolute;
		bottom: -12rem;
		width: 100%;
		height: 12rem;
		z-index: 103;
		background: #ffffff;
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
		transition: bottom 0.5s;
	
		.title {
			margin: 0.5rem 1rem 1rem;
			font-size: 1.1rem;
			font-weight: 500;
		}
	
		.basemap-container {
			display: flex;
			justify-content: space-around;
	
			.basemap-item {
				text-align: center;
	
				.thumbnail {
					width: 8rem;
					height: 4rem;
					margin: 0.6rem 0;
					padding: 0;
					border-radius: 0.5rem;
					border: 1pt solid #ffffff;
				}
	
				&.active {
					.thumbnail {
						border: 1pt solid #00aaff;
					}
				}
			}
		}
	}
	
	
</style>